<template>
  <div class="container ml-5 px-2 py-1">
    <el-row>
      <el-col :span="12">
        <div class="play-tool">
          <el-button style="margin-left: 0;" @click="play">
            <x-icon icon="CaretRight" source="el" size="24" />
          </el-button>
          <el-button @click="stop">
            <x-icon icon="stop" size="24" source="cus" />
          </el-button>
          <el-button @click="play">
            <x-icon icon="pause" size="24" source="cus" />
          </el-button>
          <el-button @click="fastback">
            <x-icon icon="fastback" size="24" source="cus" />
          </el-button>
          <el-button @click="back">
            <x-icon icon="back" size="24" source="cus" />
          </el-button>
          <el-button @click="forward">
            <x-icon icon="forward" size="24" source="cus" />
          </el-button>
          <el-button @click="refresh">
            <x-icon icon="Refresh" size="24" source="el" />
          </el-button>
          <!-- <el-checkbox v-model="isLoop" class="ml-4" label="循环播放" /> -->
          <el-tooltip :content="playFileName" placement="top">
            <span class="current-paly"> 播放中 {{ playFileName }} </span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
    <Slider
      v-model="process"
      class="my-5"
      :min="0"
      :max="allNum"
      :view-num="viewNum"
      :is-drag="true"
    />
    <div class="info">
      <div class="info-item" style="padding-top: 0;">
        Sweep: {{ sweep }}
      </div>
      <div class="info-item">
        Date/Time: {{ dateTime }}
      </div>
      <div class="info-item">
        Lat: {{ lat }}
      </div>
      <div class="info-item">
        <label style="font-weight: 200;">回放速度</label>  
        <el-input v-model="time" class="common-input ml-3">
          <template #suffix>
            ms
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script setup name="Playbar">
  import Slider from '@/components/Slider'
  import useScanStore from '@/store/modules/scanMonitor'
  const scanStore = useScanStore()

  const props = defineProps({
    reloadCharts: {
      type: Function,
      default: null
    }
  })
  const playFileName = ref('')
  const viewNum = ref(2000)
  const allNum = ref(200000)
  const process = ref(0)
  const time = ref(500)
  const interval = ref(null)
  const sweep = computed(() => {
    return `${process.value}/${allNum.value}`
  })
  const dateTime = ref('2023/11/16 10:10:12:613')
  const lat = ref(0)
  const reim = computed(() => {})

  const play = () => {
    interval.value = setInterval(() => {
      process.value += viewNum.value
    }, time.value)
  }

  const pause = () => {
    clearInterval(interval.value)
    interval.value = null
  }

  const stop = () => {
    pause()
    process.value = 0
  }

  const fastback = () => {
    process.value = 0
  }

  const back = () => {
    process.value -= viewNum.value
  }

  const forward = () => {
    process.value += viewNum.value
  }
  watchEffect(() => {
  if (scanStore.dataStatus == 1) {
    stop()
  }
})
</script>

<style scoped lang="scss">
  .container {
    background-color: #222;
    color: var(--scan-play-color);
    font-weight: 100;
    .container-header {
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .play-tool {
      margin: 2px;
      .el-button {
        padding: 4px 0;
        margin: 0;
        border-radius: 0;
        border: var(--play-bar-slider-border);
        background-color: var(--play-bar-slider);
        margin: 2px;
        width: auto;
        height: auto;
        :hover {
          background-color: #7c4918;
        }
        .x-icon {
          color: var(--scan-text-color);
        }
      }
    }
    .info {
      .info-item {
        padding: 8px 0;
      }
    }
  }
</style>
